<template>
    <div class="demo-date-picker">
        <el-date-picker
              v-model="model"
              type="daterange"
              :start-placeholder="props.startPlaceholder"
              :end-placeholder="props.endPlaceholder"
              @change="handleDateChange"
              :default-value="dateValue"
              value-format="YYYY-MM-DD"
              style="height: 38px"
              size="large"
              format="YYYY-MM-DD"
            />
    </div>
</template>
<script setup>
import {ref, watch, onMounted, defineEmits, defineProps, defineModel} from 'vue'
import { format } from 'date-fns';
const today = format(new Date(), 'yyyy-MM-dd')
const defaultValue = [undefined, undefined]
const dateValue = ref(defaultValue)
const emit = defineEmits(['change'])
const props = defineProps({
    startPlaceholder: {
        type: String,
        default: '开始时间'
    },
    endPlaceholder: {
        type: String,
        default: '结束时间'
    },
    defaultValue: {
        type: Array,
        default: () => {
            const today = format(new Date(), 'yyyy-MM-dd')
            return [undefined, undefined]
        }
    }
})
const model = defineModel()
watch(() => model.value, (val) => {
  if (!val) {
    model.value = [undefined, undefined]
  }
})
const handleDateChange = (value) => {
    emit('change', value)
}
onMounted(() => {
    model.value = defaultValue
})
</script>
<style scope>
.demo-date-picker {
  display: flex;
  width: 300px;
  padding: 0 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>